<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的文件</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f4f7fa;
            font-family: 'Arial', sans-serif;
        }

        .container {
            max-width: 1200px;
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .table {
            border-collapse: separate;
            border-spacing: 0 10px;
        }

        .table th {
            background-color: #6c9ecd;
            color: white;
            text-align: center;
            font-size: 1rem;
        }

        .table td {
            text-align: center;
            vertical-align: middle;
            background-color: #ffffff;
            border: 1px solid #dee2e6;
        }

        .table-hover tbody tr:hover {
            background-color: #eef3f9;
        }

        .table th:first-child,
        .table td:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        .table th:last-child,
        .table td:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .btn {
            font-size: 0.9rem;
            padding: 5px 12px;
        }

        .pagination .page-item.active .page-link {
            background-color: #6c9ecd;
            border-color: #6c9ecd;
        }

        footer {
            text-align: center;
            padding: 10px;
            font-size: 12px;
            color: #6c757d;
            background-color: #f1f1f1;
            border-top: 1px solid #e1e1e1;
        }
    </style>
</head>
<body>

<div class="container">
    <h2 class="text-center mt-4">我的文件</h2>
    <p class="text-center text-muted">以下是您上传的所有文件。</p>

    <form method="get" class="mb-4 d-flex">
        <div class="input-group" style="flex-grow: 1;">
            <input type="text" name="search" class="form-control" placeholder="请输入文件名或文件类型搜索" value="{{ search_query }}" style="border-radius: 20px 0 0 20px;">
            <button type="submit" class="btn btn-primary" style="border-radius: 0 20px 20px 0; background-color: #6c9ecd; border: none;">搜索</button>
        </div>
        {% if search_query %}
            <a href="?{% for key, value in request.GET.items %}{% if key != 'search' %}{{ key }}={{ value }}&{% endif %}{% endfor %}"
               class="btn btn-secondary ms-2"
               style="border-radius: 20px; background-color: #d9534f; border: none; color: white;">
                取消搜索
            </a>
        {% endif %}
    </form>


    <div class="table-responsive">
        <table class="table table-bordered table-hover mt-4">
            <thead>
            <tr>
                <th>文件名</th>
                <th>关联记录编号</th>
                <th>文件类型</th>
                <th>文件关联类别</th>
                <th>上传时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for file in files %}
                <tr>
                    <td>{{ file.file_name }}</td>
                    <td>{{ file.related_record_id|default:"无" }}</td>
                    <td>{{ file.file_type }}</td>
                    <td>{{ file.get_category_display }}</td>
                    <td>{{ file.upload_date|date:"Y-m-d H:i" }}</td>
                    <td>
                        <div class="d-flex justify-content-center gap-2">
                            <a href="{% url 'view_file' file.id %}" class="btn btn-primary btn-sm">查看</a>
                            <a href="{% url 'download_file' file.id %}" class="btn btn-success btn-sm">下载</a>
                            <a href="{% url 'delete_file' file.id %}" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除此文件吗？');">删除</a>
                            <a href="{% url 'update_file' file.id %}" class="btn btn-warning btn-sm">修改</a>
                        </div>
                    </td>
                </tr>
            {% empty %}
                <tr>
                    <td colspan="6" class="text-center text-muted">暂无文件记录</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- 分页控件 -->
    <nav aria-label="分页">
        <ul class="pagination justify-content-center mt-4">
            {% if files.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1" aria-label="首页">首页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ files.previous_page_number }}" aria-label="上一页">&laquo;</a>
                </li>
            {% endif %}
            {% for num in files.paginator.page_range %}
                {% if num >= files.number|add:-2 and num <= files.number|add:2 %}
                    <li class="page-item {% if num == files.number %}active{% endif %}">
                        <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                    </li>
                {% endif %}
            {% endfor %}
            {% if files.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ files.next_page_number }}" aria-label="下一页">&raquo;</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ total_pages }}" aria-label="尾页">尾页</a>
                </li>
            {% endif %}
        </ul>
    </nav>

</div>

<div class="text-center mb-4">
    <a href="{% url 'index' %}" class="btn btn-secondary mx-2">返回首页</a>
    <a href="{% url 'upload' %}" class="btn btn-primary mx-2">上传新文件</a>
</div>

<footer>
    &copy; 2025 文件管理系统 - 版权所有
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
